<script setup>
import HomePanel from './HomePanel.vue'
import { ref, onMounted, computed } from 'vue'
import { getGoodsAPI } from '@/apis/HomeApi'
import GoodItem from './GoodItem.vue'

const goodCategoryList = ref([])
const isLoading = ref(true)

const getGoods = async () => {
  try {
    const res = await getGoodsAPI()
    goodCategoryList.value = res.data || []
  } catch (error) {
    console.error('获取商品数据失败:', error)
  } finally {
    isLoading.value = false
  }
}

// 计算属性：取 id 最小的前 20 个商品分类
const displayedCategories = computed(() => {
  return [...goodCategoryList.value]
      .sort((a, b) => a.id - b.id)   // 按 id 升序排序
      .slice(0, 20)                  // 取前 20 个
})

onMounted(() => {
  getGoods()
})
</script>

<template>
  <div class="home-product">
    <template v-if="!isLoading">
      <HomePanel
          v-for="item in displayedCategories"
          :key="item.id"
          :title="item.name"
          class="category-panel">
        <div class="category-container">
          <RouterLink class="category-banner" :to="`/category/${item.categoryId}`">
            <img
                v-img-lazy="item.image"
                :alt="item.name"
                class="banner-image"/>
            <div class="banner-overlay">
              <h3 class="category-title">{{ item.name }}</h3>
              <p class="category-desc">{{ item.description }}</p>
            </div>
          </RouterLink>
        </div>
      </HomePanel>
    </template>

    <div v-else class="loading-indicator">
      正在加载商品数据...
    </div>
  </div>
</template>

<style scoped lang="scss">
.home-product {
  background: #fff;
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 30px;
  padding: 15px;

  .category-panel {
    margin-bottom: 0;
  }

  @media (max-width: 1200px) {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }

  @media (max-width: 991px) {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.category-container {
  width: 100%;
  height: 100%;
}

.category-banner {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  aspect-ratio: 4 / 5;
  height: auto;
  min-height: 150px;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);

    .banner-overlay {
      background: rgba(0, 0, 0, 0.75);
    }
  }

  @media (min-width: 992px) {
    flex: 0 0 200px;
    max-height: 400px;
  }
}

.banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;

  .category-banner:hover & {
    transform: scale(1.03);
  }
}

.banner-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px; /* 略减小内边距，适应更小的卡片 */
  background: rgba(0, 0, 0, 0.65);
  color: white;
  transition: background 0.3s ease;
}

.category-title {
  font-size: 1.2rem; /* 减小字体，适应更小的卡片 */
  font-weight: 600;
  margin-bottom: 6px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
  white-space: normal; // 允许换行
  word-break: break-all; // 长单词/URL自动换行
  overflow: hidden;
  display: -webkit-box;
}

.category-desc {
  font-size: 0.85rem; /* 减小字体 */
  opacity: 0.9;
  line-height: 1.4;
  margin: 0;
}

.goods-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 调整商品网格，匹配卡片大小 */
  gap: 15px;
  width: 100%;

  @media (max-width: 768px) {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
  }
}

.goods-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
}

.loading-indicator {
  text-align: center;
  padding: 40px;
  font-size: 1.2rem;
  color: #666;
}
</style>